<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>销售订单</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="../../../elementUI/index.css">
  <link rel="stylesheet" href="../../../css/index.css">
</head>

<body>
  <div id="app" class="minWidth">
    <!-- 顶部统计 -->
    <el-row :gutter="12">
      <el-col :span="8">
        <el-card shadow="always">
          <span style="font-weight:700">当前查询：</span>全部订单
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="always">
          <span style="font-weight:700">未处理订单数：</span>10
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="always">
          <span style="font-weight:700">销售金额：</span>1000
        </el-card>
      </el-col>
    </el-row>
    <el-form :inline="true" :form="form">
       <!-- 身份切换 -->
      <el-form-item>
        <el-radio @input="RadioChange" v-model="form.Order_Type" label="0">用户</el-radio>
        <el-radio @input="RadioChange" v-model="form.Order_Type" label="1">经销商</el-radio>
      </el-form-item>
      <!-- 筛选器 -->
      <el-form-item label="商品名称:">
        <el-input v-model="form.Article_Name" placeholder="请输入商品名" />
      </el-form-item>
      <el-form-item v-if="form.Order_Type=='0'" label="时间范围:">
        <div class="block">
          <el-date-picker v-model="MyDate" value-format="yyyy-MM-dd HH:mm:ss" type="daterange" range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptionsTwo">
          </el-date-picker>
        </div>
      </el-form-item>
      <el-form-item v-if="form.Order_Type=='1'" label="经销商:">
        <el-select @change="SelectDistributors" v-model="form.Dealer_SerialNumber" clearable placeholder="请选择经销商">
          <el-option v-for="item in distributors" :key="item.Dealer_SerialNumber" :label="item.Dealer_Name"
            :value="item.Dealer_SerialNumber">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSerach">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button v-if="form.Order_Type=='0'" type="primary" @click="dialogVisible1 = true">导入</el-button>
      </el-form-item>
      <el-form-item>
        <el-button v-if="form.Order_Type=='0'" type="primary" @click="onExcel">导出</el-button>
      </el-form-item>
      <el-form-item>
        <el-button v-if="form.Order_Type=='0'" type="primary" @click="ribao">发布销售日报</el-button>
      </el-form-item>
      <el-form-item>
        <el-button v-if="form.Order_Type=='1'" type="primary" @click="onExcel">差异</el-button>
      </el-form-item>
    </el-form>

    <el-tabs type="card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="全部" name=" "></el-tab-pane>
      <el-tab-pane label="未付款" name="0"></el-tab-pane>
      <el-tab-pane label="已付款" name="1"></el-tab-pane>
      <el-tab-pane label="待发货" name="9"></el-tab-pane>
      <el-tab-pane label="发货中" name="6"></el-tab-pane>
      <el-tab-pane label="已送达" name="7"></el-tab-pane>
      <el-tab-pane label="已退款" name="4"></el-tab-pane>
    </el-tabs>
    <div style="display: flex;width: 100%;">
      <div style="flex-shrink: 0; width: 15%; border: 1px solid rgb(228, 231, 237); margin-right: 10px;">
        <h3 style="margin-left:10px;">经销商、销售点筛选</h3>
        <el-tree :data="menuList" ref="tree" show-checkbox node-key="Dealer_SerialNumber" check-on-click-node
          default-expand-all :expand-on-click-node="false" @check-change="handleCheckChange">
          <template v-slot="{data}">
            <span :style="data.Dealer_SerialNumber.length==5?'color:rgb(196, 81, 46)':''">{{data.Dealer_Name}}</span>
          </template>
        </el-tree> 
      </div>
      <div style="width: 84.5%;">
        <el-table :data="tableData" id="out-table" stripe border height="calc(100vh - 200px)" style="width: 100% ;" @expand-change="expand">
          <el-table-column type="expand" label="详情" width="60">
              <el-table :data="sale_detail__form" stripe border height="calc(100vh - 140px)" style="width: 58%">
                  <!-- <el-table-column align="center" label="序号" width="50" type="index"></el-table-column> -->
                  <el-table-column align="center" prop="Group_Transaction_SerialNumber" width="200" label="商品编号"></el-table-column>
                  <el-table-column align="center" prop="Article_Name" label="商品库存流水号" width="200"></el-table-column>
                  <el-table-column align="center" prop="Total_Quantity" label="数量" width="55"></el-table-column>
                  <el-table-column align="center" prop="Quantity" label="吊牌价" width="100"></el-table-column>
                  <el-table-column align="center" prop="Amount" label="销售单价" width="100"></el-table-column>
                  <el-table-column align="center" prop="Buyer_Contact" label="销售金额" width="100"></el-table-column>
                  <el-table-column align="center" prop="Buyer_Contact_Phone" label="是否被接单状态" width="200"></el-table-column>
                  <el-table-column align="center" prop="Row_Status" label="退款状态" width="100"></el-table-column>
                  <el-table-column align="center" prop="Row_Status" label="录入人" width="100"></el-table-column>
                  <el-table-column align="center" prop="Row_Status" label="录入时间" width="150"></el-table-column>
              </el-table>
          </el-table-column>
          <el-table-column label="序号" width="50" type="index"></el-table-column>
          <el-table-column prop="Collection_SerialNumber" min-width="150" label="订单流水号"></el-table-column>
          <el-table-column prop="Store_Name" show-overflow-tooltip effect="dark" label="门店名称" min-width="100"></el-table-column>
          <!-- <el-table-column prop="Row_Status" label="订单状态" width="90">
            <template v-slot="{ row }">
              <el-tag :type="row.Row_Status=='1'?'success':''" size="small">{{row.Row_Status=='1'?'已付款':'未付款'}}</el-tag>
            </template>
          </el-table-column> -->
          <el-table-column prop="Sales_Date" label="下单日期" min-width="150"></el-table-column>
          <el-table-column prop="Collection_Date" label="付款日期" min-width="150">
            <template v-slot="{ row }">
              {{row.Row_Status=='1'?row.Collection_Date:''}}
            </template>
          </el-table-column>
          <el-table-column prop="Sales_Contacts" label="顾客名称" min-width="100"></el-table-column>
          <el-table-column prop="Sales_Phone" width="120" label="顾客电话" min-width="100"></el-table-column>
          <el-table-column prop="Sales_Amount" label="消费总额" min-width="80"></el-table-column>
          <el-table-column prop="Collection_Amount" label="实收金额" min-width="80"></el-table-column>
          <el-table-column prop="Dealer_Name" label="经销商">
            <template v-slot="{ row }">
              {{row.Dealer_Name==''?'自营':row.Dealer_Name}}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column label="操作" width="300">
            <template v-slot="{row}">
              <div style="display: flex;justify-content: center;">
                <el-button
                  v-if="row.Row_Status==1&&row.Refund_Type==0 || row.Row_Status==6&&row.Refund_Type==0||row.Row_Status==7&&row.Refund_Type==0||row.Row_Status==9&&row.Refund_Type==0"
                  type="primary" size="small"
                  @click="refund(row.Sales_Order_SerialNumber,row.Collection_Amount)">申请退款</el-button>
                <el-button v-else disabled type="primary" size="small">申请退款</el-button>
                <el-button type="success" size="small" v-if="row.Receive_Type==0"
                  @click="AddMember(row)">分配供应商</el-button>
                <el-button type="success" size="small" v-if="row.Row_Status==9&&row.Sales_Address != '用户自提'"
                  @click="onShipped(row.Sales_Order_SerialNumber,row,row.Quantity)">已发货</el-button>
                <el-button type="success" size="small" v-if="row.Sales_Address != '用户自提'&&row.Row_Status==6"
                  @click="delivered(row.Sales_Order_SerialNumber,row.Row_Status)">已送达</el-button>
              </div>
            </template>
          </el-table-column> -->
        </el-table>
        <el-pagination style="position: fixed;bottom: 0;" background v-show="total > 0" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" :current-page="form.page" :page-sizes="[10,50,100,500,1000]"
          :page-size="form.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>


    </div>
  </div>
  <script type="text/javascript" src="../../../js/jquery-3.6.0.min.js"></script>
  <script type="text/javascript" src="../../../js/jquery.cookie.js"></script>
  <script type="text/javascript" src="../../../js/vue.min.js"></script>
  <script type="text/javascript" src="../../../elementUI/index.js"></script>
  <script type="text/javascript" src="../../../js/utils.js"></script>
  <script type="text/javascript" src="../../../js/FileSaver.min.js"></script>
  <script type="text/javascript" src="../../../js/FileSaver.js"></script>
  <script type="text/javascript" src="../../../js/xlsx.full.min.js"></script>
  <script type="text/javascript" src="../../../config/request.js"></script>
  <script type="text/javascript" src="./js/SalesOrder1.js"></script>
</body>

</html>